import React from "react";
import {Form, Input, Button, Select, InputNumber, Col, Checkbox, Row} from 'antd';
import API from '../../api/api';

const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 19,
    },
};

export default class UpdateUserForm extends React.Component {

    bindRoleIdList = [];
    userOrder = null;
    deptId = null;
    defaultData = null;
    permissions = [];
    formRef = React.createRef();

    onGenderChange = (value) => {
        this.formRef.current.setFieldsValue({
            note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
    };

    getRoles = () => {
        let items = []
        items = JSON.parse(sessionStorage.getItem("roles"))
        let checkBoxItems = [];
        items.map(item => {
            checkBoxItems.push(
                <Col span={6}>
                    <Checkbox
                        value={item.key}
                        style={{
                            lineHeight: '32px',
                        }}
                        // onClick={item=>{this.props.onChange(item)}}
                    >
                        {item.name}
                    </Checkbox>
                </Col>
            )
        })
        return checkBoxItems;
    }

    onFinish = (values) => {
        console.log(values)
        if(this.bindRoleIdList.length==0){
            alert("無更改內容")
        }else{
            let result = []
            if(this.props.bindObj=="user"){
                result = API.updateUserBind({
                    bindRoleIdList:this.bindRoleIdList
                });
            }else {
                result = API.updateDeptBind({
                    bindRoleIdList:this.bindRoleIdList
                });
            }
            if(result=="ok"){
                console.log("ok")
                this.props.result("ok");
            }else{
                alert(result)
                this.props.result("error");
            }
        }

    };

    onReset = () => {
        this.formRef.current.resetFields();
    };

    render() {
        console.log("bindRoleIdList",this.bindRoleIdList)
        if(this.props.bindObj=="user"){
            let userId = sessionStorage.getItem("userId");
            this.defaultData = API.getUserBindContent(userId);
        }else {
            let deptId = sessionStorage.getItem("deptId");
            this.defaultData = API.getDeptBindContent(deptId);
        }

        return (
            <Form
                {...layout}
                ref={this.formRef}
                name="control-ref"
                onFinish={this.onFinish}
                onReset={this.onReset}
            >
                <Form.Item
                    rules={[
                        {
                            required: true,
                            // type: 'Tree'
                        }
                    ]}
                    ellipsis={true}
                    // name={"userPermission"}
                    label={"角色綁定"}
                >
                    <Checkbox.Group defaultValue={this.defaultData.bindRoleIdList} onChange={item=>{this.bindRoleIdList=item}}>
                        <Row>
                            {this.getRoles()}
                        </Row>
                    </Checkbox.Group>
                </Form.Item>

                <Form.Item
                    label="提交修改"
                    name="commit"
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}













// import {Input, InputNumber, Modal} from "antd";
// import SelectRole from "./SelectRole";
// import React from "react";
//
// <span>用户工号</span>
// <Input placeholder="Basic usage" />
//     <span>用户备注</span>
// <InputNumber placeholder="Basic usage" />
// <span style={{display:"block"}}>用户角色</span>
// <SelectRole />

